<!-- 个人主页 首页 -->
<template>
  <div id="home">
    <p class="title">我创建的歌单（{{ songBox.length }}）</p>

    <ul>
      <li :class="(i%5) !== 0 ? 'ml' : ''" v-for="(item, i) of songBox" :key="i">
        <div>
          <!-- 歌单图标 --->
          <i class="song-icon" :class="item.iconClass"></i>

          <!-- 歌单数据——音乐数，播放按钮 栏--->
          <p>
            <i class="el-icon-headset"> {{ item.number }}</i>
            <i class="el-icon-video-play"></i>
          </p>
        </div>

        <p class="text-hidden">{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "PersonalHome",

  beforeMount() {
    let defaultUserId = this.$cookies.get('defaultUserId');
    // 初始化 用户歌单
    this.songBox = this.$cookies.get(defaultUserId).songBox;
  },

  data () {
    return {
      // 用户歌单
      songBox: [],
    }
  }
}
</script>

<style lang="less" scoped>
@import "../public/less/user_home";
</style>